<template>
  <view>
    <!-- 搜索框 -->
    <uGoSearch />
    <!-- 轮播图 -->
    <u-swiper
      :list="swiperData"
      name="image_src"
      mode="dot"
      height="340"
      border-radius="0"
    ></u-swiper>
    <!-- 导航栏 -->
    <view class="u-flex">
      <navigator
        class="u-flex-1 u-p-25"
        v-for="item in catItems"
        :key="item.name"
      >
        <u-image
          mode="widthFix"
          lazy-load="true"
          :src="item.image_src"
        ></u-image>
      </navigator>
    </view>
    <!-- 楼层模块 -->
    <view class="floorData">
      <!-- 每个模块 -->
      <view
        class="floorGroup"
        v-for="item in floorData"
        :key="item.floor_title.name"
      >
        <!-- 标题 -->
        <view class="floor-Group-Title">
          <u-image :src="item.floor_title.image_src" mode="widthFix"></u-image>
        </view>
        <!-- 内容 -->
        <view class="floor-Group-Content">
          <navigator v-for="value in item.product_list" :key="value.name">
            <u-image
              :src="value.image_src"
              height="100%"
              mode="scaleToFill"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperData: [],
      catItems: [],
      floorData: [],
    };
  },
  // 请求数据
  // https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata
  onLoad() {
    // 页面显示就需要加载数据
    this.getSwiperData();
    this.getCatItems();
    this.getFloorData();
  },
  methods: {
    // 轮播图
    async getSwiperData() {
      // 使用uni-api，是具备Promise风格封装而成的api，返回一个数组，第一个参数是err,第二个才是请求成功返回的data
      // const [err, res] = await uni.request({
      //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
      // });
      // if (!err) {
      //   this.swiperData = res.data.message;
      // }
      // 改造
      const resSwiper = await this.$u.get("/home/swiperdata");
      // 不同于uni-api 它少了data的那一层
      this.swiperData = resSwiper.message;
    },
    // 楼层模块
    async getFloorData() {
      const resFloorData = await this.$u.get(`/home/floordata`);
      // console.log(resFloorData);
      this.floorData = resFloorData.message;
    },
    // 导航栏
    async getCatItems() {
      const resCatitems = await this.$u.get("/home/catitems");
      this.catItems = resCatitems.message;
    },
  },
};
</script>

<style lang="scss">
// 标题
.floor-Group-Title {
  margin-top: 10rpx;
}
// 内容
.floor-Group-Content {
  overflow: hidden;
  navigator {
    float: left;
    margin-left: 14rpx;
    &:first-child {
      width: 232rpx;
      height: 386rpx;
    }
    &:nth-last-child(-n + 4) {
      width: 232rpx;
      height: 188rpx;
    }
    &:nth-last-child(-n + 2) {
      margin-top: 10rpx;
    }
  }
}
</style>
